<!DOCTYPE html>
<html lang="en">
	<head>
	</head>
	<body>
		<style>
			body {
				height: 100%;
				background-color: #DDD
			}

			.btnbox {
				width: 200px;
				height: 300px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-evenly;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background-color: #EEE
			}

			.btnbox button {
				width: 100px;

				height: 83px;
			}

			.map {
				display: flex;
				align-items: center;
				justify-content: center;
				 /* width: 200px; */
				/* height: 200px; */
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				box-shadow: 2px 2px 1px rgb(0, 0, 0, .3);
				border: 1px solid black;
			}

			.map>div {
				width: 8px;
				height: 8px;
				position: absolute;
				border-radius: 50%;

			}

			div.head {
				border: 1px solid black;
				background: repeating-radial-gradient(#336666, #ada333);
				margin: 0px;
				animation: foodAnimate 1s linear infinite;
				box-shadow: 2px 2px 1px #888888;
			}

			div.body {
				border: 1px solid black;
				background: repeating-radial-gradient(#FF9224, #c2b7ff);
				margin: 0px;
				box-shadow: 2px 2px 1px #888888;
			}

			div.food {
				background: repeating-radial-gradient(white, green);
				left: 0px;
				top: 0px;
				animation: foodAnimate 0.5s linear infinite;
			}

			@keyframes foodAnimate {
				0% {
					box-shadow: 0px 0px 10px red;
				}

				50% {
					box-shadow: 0px 0px 150px red;
				}

				100% {
					box-shadow: 0px 0px 10px red;
				}
			}
		</style>
		<div class="btnbox">
			<button id="start">按Enter开始/加速</button>
			<button id="pause">暂停</button>
			<button id="restart">重新开始</button>
		</div>
		<div class="map">
			</br>
		</div>
		<script src="js/food.js"></script>
		<script src="js/snake.js"></script>
		<script src="js/game.js"></script>
		<script>
			const game = new Game(".map")
			const start = document.querySelector("#start")
			const pause = document.querySelector("#pause")
			const restart = document.querySelector("#restart")

			start.onclick = function() {
				game.start()
			}
			pause.onclick = function() {
				game.pause()
			}
			restart.onclick = function() {
				game.restart()
			}

			document.onkeydown = function(e) {
				// console.log(e.keyCode);
				switch(e.keyCode){
					case 32:
						game.pause();
						break;
					case 13:
						game.start();
						break;
					case 82:
						game.restart();
						break;
				}
				if (game.getKey() == "left") {
					switch (e.keyCode) {
						case 87:
							game.change("top")
							break;

						case 83:
							game.change("bottom")
							break;

						default:
							break;
					}
				} else if (game.getKey() == "top") {
					switch (e.keyCode) {
						case 65:
							game.change("left")
							break;
						case 68:
							game.change("right")
							break;
						default:
							break;
					}
				} else if (game.getKey() == "right") {
					switch (e.keyCode) {
						case 87:
							game.change("top")
							break;
						case 83:
							game.change("bottom")
							break;
						default:
							break;
					}
				} else {
					switch (e.keyCode) {
						case 65:
							game.change("left")
							break;
						case 68:
							game.change("right")
							break;
						default:
							break;
					}
				}
			}
		</script>
	</body>


</html>
